<template>
  <div :class="['message', isUser ? 'message-user' : 'message-ai']">
    <div class="message-avatar">
      <div class="avatar-img">
        {{ isUser ? '👤' : '🤖' }}
      </div>
    </div>
    <div class="message-bubble">
      <div class="message-content">
        <span v-if="isUser">{{ content }}</span>
        <span v-else v-html="displayContent"></span>
        <span v-if="!isUser && isTyping" class="typing-indicator">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </span>
      </div>
      <div class="message-time">{{ time }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatMessage',
  props: {
    content: {
      type: String,
      required: true
    },
    time: {
      type: String,
      required: true
    },
    isUser: {
      type: Boolean,
      default: false
    },
    isTyping: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      displayContent: '',
      fullContent: '',
      typingSpeed: 25, // 打字速度(ms)
      typingIndex: 0,
      typingTimer: null
    }
  },
  watch: {
    content: {
      immediate: true,
      handler(newVal) {
        if (this.isUser) {
          this.displayContent = newVal;
          return;
        }
        
        // 如果内容变化，重置打字效果
        if (newVal !== this.fullContent) {
          this.fullContent = newVal;
          
          // 如果是新消息，重新开始打字效果
          if (this.typingTimer) {
            clearInterval(this.typingTimer);
          }
          
          // 如果是增量更新，继续从当前位置打字
          if (newVal.startsWith(this.displayContent)) {
            this.typingIndex = this.displayContent.length;
          } else {
            this.typingIndex = 0;
            this.displayContent = '';
          }
          
          this.startTyping();
        }
      }
    }
  },
  methods: {
    startTyping() {
      this.typingTimer = setInterval(() => {
        if (this.typingIndex < this.fullContent.length) {
          // 添加字符
          this.displayContent += this.fullContent.charAt(this.typingIndex);
          this.typingIndex++;
          
          // 随机调整打字速度，让打字效果更自然
          if (Math.random() > 0.8) {
            clearInterval(this.typingTimer);
            setTimeout(() => {
              this.startTyping();
            }, Math.random() * 200 + 50);
          }
        } else {
          clearInterval(this.typingTimer);
          this.$emit('typing-complete');
        }
      }, this.typingSpeed);
    }
  },
  beforeUnmount() {
    if (this.typingTimer) {
      clearInterval(this.typingTimer);
    }
  }
}
</script>

<style scoped>
.message {
  display: flex;
  margin-bottom: 16px;
  max-width: 100%;
  animation: fadeIn 0.3s ease;
  position: relative;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-avatar {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  flex-shrink: 0;
}

.message-user .message-avatar {
  order: 2;
  margin-right: 0;
  margin-left: 10px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  font-size: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message-ai .avatar-img {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.message-user .avatar-img {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  max-width: calc(100% - 90px);
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.message-ai .message-bubble {
  background-color: white;
  border-bottom-left-radius: 5px;
  border: 1px solid #eee;
}

.message-user .message-bubble {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  border-bottom-right-radius: 5px;
  margin-left: auto;
}

.message-content {
  word-break: break-word;
  line-height: 1.5;
}

.message-time {
  font-size: 12px;
  color: var(--text-lighter);
  margin-top: 5px;
  text-align: right;
}

.message-user .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}

.typing-indicator .dot {
  width: 6px;
  height: 6px;
  background-color: var(--text-light);
  border-radius: 50%;
  margin: 0 2px;
  display: inline-block;
  animation: blink 1.4s infinite both;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0% { opacity: 0.4; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(0.6); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .message-bubble {
    max-width: calc(100% - 60px);
  }
}
</style> 